<!--
 * @Descripttion: 
 * @version: @ 1.0.0
 * @Author: 朱江洲
 * @Date: 2021-09-18 09:43:02
 * @LastEditors: 朱江洲
 * @LastEditTime: 2022-05-12 16:23:53
-->
<template>
  <div>
    <div class="header">
      <div class="info">账号密码</div>
    </div>
    <div class="content" v-if="toggle == 1">
      <el-form
        :model="psdForm"
        ref="psdForm"
        :rules="psdRules"
        label-width="80px"
        :inline="false"
        size="normal"
        v-if="toggle == 1"
      >
        <el-form-item label="旧密码" prop="oldPsd">
          <el-input
            v-model="psdForm.oldPsd"
            placeholder="请输入旧密码"
            style="width: 368px"
            type="password"
          ></el-input>
        </el-form-item>
        <el-form-item label="新密码" prop="newPsd">
          <el-input
            v-model="psdForm.newPsd"
            placeholder="新密码不能与旧密码相同"
            style="width: 368px"
            type="password"
          ></el-input>
        </el-form-item>
        <el-form-item label="重复密码" prop="repeatPsd">
          <el-input
            v-model="psdForm.repeatPsd"
            placeholder="请再次输入新密码"
            style="width: 368px"
            type="password"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">确认修改</el-button>
          <el-button @click="toggleReset">验证码修改</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="content" v-else>
      <el-form
        :model="codeForm"
        ref="codeForm"
        :rules="psdRules"
        label-width="80px"
        :inline="false"
        size="normal"
        v-if="toggle == 2"
      >
        <el-form-item label="登录账号">
          <el-input
            v-model="userInfo.phonenumber"
            style="width: 368px"
            disabled
          ></el-input>
        </el-form-item>
        <el-form-item label="验证码" prop="code">
          <el-input
            v-model="codeForm.code"
            style="width: 210px"
            placeholder="请输入验证码"
          ></el-input>
          <el-button
            type="primary"
            size="default"
            @click="getcode"
            style="margin-left: 50px"
          >
            获取验证码
          </el-button>
        </el-form-item>
        <el-form-item label="新密码" prop="newPsd">
          <el-input
            v-model="codeForm.newPsd"
            placeholder="新密码不能与旧密码相同"
            style="width: 368px"
            type="password"
          ></el-input>
        </el-form-item>
        <el-form-item label="重复密码" prop="repeatPsd">
          <el-input
            v-model="codeForm.repeatPsd"
            placeholder="请再次输入新密码"
            style="width: 368px"
            type="password"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="codeSubmit">确认修改</el-button>
          <el-button @click="psdToggle">密码修改</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { updatePwd, updatePwdByCode, getCode } from "@/api/user";
export default {
  props: {
    userInfo: {
      type: Object,
      required: true,
    },
    dialog: {
      type: Object,
      required: true,
    },
  },
  data() {
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入新密码"));
      } else if (value === this.psdForm.oldPsd) {
        callback(new Error("不能和旧密码相同"));
      } else {
        if (this.psdForm.repeatPsd !== "") {
          this.$refs.psdForm.validateField("repeatPsd");
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入新密码"));
      } else if (value !== this.psdForm.newPsd) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      toggle: 1,
      psdRules: {
        oldPsd: [{ required: true, message: "请输入旧密码", trigger: "blur" }],
        newPsd: [
          { required: true, message: "请输入新密码", trigger: "blur" },
          { min: 6, max: 12, message: "密码长度在6-12位", trigger: "blur" },
          { validator: validatePass, trigger: "blur" },
        ],
        repeatPsd: [
          { required: true, message: "请再次输入新密码", trigger: "blur" },
          { min: 6, max: 12, message: "密码长度在6-12位", trigger: "blur" },
          { validator: validatePass2, trigger: "blur" },
        ],
        code: [{ required: true, message: "请输入验证码", trigger: "blur" }],
      },
      codeForm: {
        accountNumber: "",
        code: "",
        newPsd: "",
        repeatPsd: "",
      },
      psdForm: {
        oldPsd: "",
        newPsd: "",
        repeatPsd: "",
      },
    };
  },
  methods: {
    //   获取验证码
    getcode() {
      getCode({
        mobile: this.userInfo.phonenumber,
      }).then((res) => {
        this.$message.success(res.msg);
      });
    },
    // 切换成验证码修改
    toggleReset() {
      this.toggle = 2;
      this.$nextTick(function () {
        this.$refs.codeForm.clearValidate();
      });
    },
    // 切换成密码修改
    psdToggle() {
      this.toggle = 1;
      this.$nextTick(function () {
        this.$refs.psdForm.clearValidate();
      });
    },
    // 密码修改提交
    onSubmit() {
      this.$refs.psdForm.validate((valid) => {
        if (!valid) return;
        updatePwd({
          oldPassword: this.psdForm.oldPsd,
          newPassword: this.psdForm.newPsd,
        }).then((res) => {
          this.$message.success(res.msg);
          this.dialog.psdShow = false;
          this.psdForm = {
            oldPsd: "",
            newPsd: "",
            repeatPsd: "",
          };
        });
      });
    },
    // 验证码修改提交
    codeSubmit() {
      this.$refs.codeForm.validate((valid) => {
        if (!valid) return;
        updatePwdByCode({
          code: this.codeForm.code,
          password: this.codeForm.newPsd,
        }).then((res) => {
          this.$message.success(res.msg);
          this.dialog.psdShow = false;
          this.codeForm = {
            accountNumber: "",
            code: "",
            newPsd: "",
            repeatPsd: "",
          };
        });
      });
    },
  },
};
</script>

<style lang="less" scoped>
.app-container {
  padding: 24px 25px;
  .header {
    .info {
      font-size: 0.1rem;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #2b2b2b;
    }
  }
  .content {
    margin-top: 40px;
  }
}
</style>